<!-- 
    说明： 职位列表页面
 -->
 <template>
  <section class="page-com">
    <!-- 头部导航栏 -->
    <HeaderCom v-if="!hideHeadFooter" class="header_com_wrap" :style="showHeader"/>
    <div :class="['content-page-com', { noTop: hideHeadFooter }]" :style="showTop">
      <img v-if="!isProductManage" :src="bgImgSrc" alt="" class="top-img" />
      <div v-if="isProductManage" class="product-manage-banner">
            <img
            class="banner-bg"
            src="@/assets/images/productManage/banner.png"
            alt=""
            srcset=""
            />
            <p class="banner-text">创意探索 勇敢突破</p>
        </div>
      <div class="main-com">
        <slot></slot>
      </div>
      <FooterMenu v-if="!hideHeadFooter" />
    </div>
  </section>
</template>

<script>
import FooterCom from "@/components/footer/index.vue";
import HeaderCom from "@/components/header/index.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
export default {
  // 组件名称
  name: "pageCom",
  // 组件参数 接收来自父组件的数据
  props: {
    showHeader: {
  
      default: () => {
        return '';
      },
    },
    showTop: {
      
      default: () => {
        return '';
      },
    },
    hideHeadFooter: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  // 局部注册的组件
  components: { HeaderCom, FooterMenu },
  // 组件状态值
  data() {
    return {
      pageTitle: "",
    };
  },
  // 计算属性
  computed: {
    // 模块背景图
    bgImgSrc() {
      let name = this.$route.name;
      if (
        [
          "invited", // 面试邀约
          "feedback", // 邀约反馈
          "deliverRecord", // 投递记录
          "userInfo", // 用户信息
          "resumeReview", // 简历预览
          "resumeEdit", // 简历编辑
          "setAccount", // 账号设置
          'registrationProduct', // 报名项目
          'productComment', // 项目评论
          'matchManage', // 比赛管理
        ].indexOf(name) > -1
      ) {
        return require("@/assets/images/user/banner.png");
      } else {
        return require("@/assets/images/top-bg.png");
      }
    },
    isProductManage () {
        let name = this.$route.name;
        return [
          "editEntryProduct", // 编辑项目报名详情
          'checkProductDetail', // 报名详情查看
        ].indexOf(name) > -1
    }
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    console.log("this.$route.meta>>", this.$route.meta);
    this.pageTitle = this.$route.meta?.title || "--";
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page-com {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background: #f5f8fa;
  .content-page-com {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;
    .top-img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }
    .main-com {
      background: #fff;
      width: 100%;
      max-width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
      min-height: calc(100vh - 285px);
    }
    .bottom-page {
      margin-top: 50px;
      text-align: center;
    }
  }
}
.product-manage-banner {
    position: relative;
    width: 100%;
    height: 220px;
    .banner-bg {
    position: relative;
    width: 100%;
    height: 220px;
    object-fit: cover;
    }
    .banner-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translate3d(0, -50%, 0);
    font-size: 38px;
    font-family: "PingFangSC-Light, PingFang SC";
    font-weight: 300;
    color: #ffffff;
    line-height: 53px;
    }
}
/deep/ .el-breadcrumb__inner {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
.noTop {
  padding-top: 0 !important;
}
// @media screen and (max-width: 1500px) {
//   .page-com .main-com {
//     max-width: 1000px !important;
//   }
// }

@media screen and (max-width: 480px) {
  .page-com{
    min-width: 0;
    .showHeader{
      display: none;
    }
    .content-page-com{
      padding-top: 60px;
      // display: none;
      .top-img{
        display: none;
      }
      .main-com {
        background: #fff;
        width: 100%;
        margin: 0;
        padding: 10px;
      }
    }
  }
  .page-com {
    .content-page-com {
      .main-com {
        min-height: auto;
      }
    }
  }
}
</style>
